<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
          vue3：通过proxy代理实现的响应式
          语法：
           let 新对象 = new Proxy(源对象, {
                // 拦截读取属性值
                get (target, key) {
                    return Reflect.get(target, key)
                },
                // 拦截设置属性值或添加新属性
                set (target, key, value) {
                    return Reflect.set(target, key, value)
                },
                // 拦截删除属性
                deleteProperty (target, key) {
                    return Reflect.deleteProperty(target, key)
                }
                // 共有13种代理劫持操作
            })
        */
        //1.定义数据  data中的数据
        let user = {
            name: "妲己",
            age: 18
        }

        //2.proxy实现响应式
        let vm = new Proxy(user, {
            //拦截读取属性值
            get(target, attr, proxy) {
                //target：源对象
                //attr:操作的属性
                //proxy:代理对象
                console.log(attr + "读取属性值--get----");
                // console.log(arguments); //实参集合
                return Reflect.get(target, attr);
            },
            // 拦截设置属性值或添加新属性
            set(target, attr, value) {
                console.log(attr + "设置属性值 ---set---");
                // console.log(arguments);
                Reflect.set(target, attr, value)
            },

            // 拦截删除属性
            deleteProperty(target, attr) {
                console.log(attr+"被删除了---delete");
                return Reflect.deleteProperty(target, attr)
            }
        });



        //1.获取属性值 --- 
        console.log(vm.name); //读取属性值--get---- 妲己
        console.log(vm.age); //读取属性值--get----  age

        //2.设置属性值---添加属性也能触发set和get，也会有响应式
        vm.name = "西施";
        vm.sex = "女"; //sex设置属性值 ---set---

        //3.删除属性值
        delete vm.name; //name被删除了---delete
        console.log(vm);


        /* 
         vue2:
            通过Object.defineProperty()的get和set进行数据劫持，数组通过重写数组的方法
            问题：
               1. 多个属性需要循环，
               2. 添加属性没有set和get方法，没有响应式  $set
               3. 删除属性不会触发set和get方法，没有响应式  $delete
         vue3:
            通过proxy实现数据的代理，不是监听属性转而监听对象，不用循环，添加属性和删除属性都能触发响应式
             这几种方式都能实现响应式
             obj.xx = 值
             delete obj.xx
             arr[0] = 19
        */


    </script>
</body>

</html>